<template>
  <div class="train-shelf-wrapper">
    <el-form-item label="上架时间："
      prop="shelveWay"
      :rules="[{required: false}]">
      <el-radio-group v-model="shelfWay" @change="handleShelfChange">
        <el-radio :label="SHELF_LEVEL.NOW">立即上架</el-radio>
        <el-radio :label="SHELF_LEVEL.TIME">定时上下架</el-radio>
      </el-radio-group>
    </el-form-item>
    <!--培训 上下架时间选择 -->
    <el-form-item label="上下架时间："
      v-show="shelfWay === SHELF_LEVEL.TIME"
      prop="trainShelveTimeCheck"
      :rules="rules">
      <div v-show="shelfWay === SHELF_LEVEL.TIME">
        <el-date-picker
          placeholder="请选择上架时间"
          type="datetime"
          :picker-options="pickerOptions"
          :format="TIME_FORMAT"
          v-model="shelveTime"
          @change="handleDateChange"/>
        ~
        <el-date-picker
          placeholder="请选择下架时间"
          type="datetime"
          :picker-options="pickerOptions"
          :format="TIME_FORMAT"
          v-model="offShelveTime"
          @change="handleDateChange"/>
        <span class="form-help">至少选择一项</span>
      </div>
    </el-form-item>
  </div>
</template>
<script>
  import filters from 'src/filters'
  import {
    SHELVE_TIME_FORMAT,
    SHELF_LEVEL // 上架类型
  } from '../constant'
  export default {
    props: {
      formData: {
        type: Object
      },
      shelfLevel: {
        type: String
      }
    },
    computed: {
      shelveTime: {
        set (val) {
          this.editorForm.shelveTime = val ? filters.FormatDate(val, SHELVE_TIME_FORMAT) : ''
        },
        get () {
          return this.editorForm.shelveTime
        }
      },
      offShelveTime: {
        set (val) {
          this.editorForm.offShelveTime = val ? filters.FormatDate(val, SHELVE_TIME_FORMAT) : ''
        },
        get () {
          return this.editorForm.offShelveTime
        }
      }
    },
    data () {
      return {
        SHELF_LEVEL,
        TIME_FORMAT: SHELVE_TIME_FORMAT,
        shelfWay: this.shelfLevel, // 上架时间类型
        editorForm: this.formData,
        rules: [
          {required: false, message: '请选择定时上下架时间'}
        ],
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      }
    },
    created () {
      let that = this
      let ruleItem = {
        validator (rule, value, callback) {
          setTimeout(() => {
            if (that.shelfLevel === SHELF_LEVEL.TIME) {
              let { shelveTime, offShelveTime } = that.editorForm
              let parShelveTime = Date.parse(shelveTime)
              let parOffShelveTime = Date.parse(offShelveTime)
              if (!shelveTime && !offShelveTime) {
                callback(new Error(this.nullMessage))
              }
              if (shelveTime && offShelveTime && parOffShelveTime <= parShelveTime) {
                callback(new Error(this.minMessage))
              }
              if (parShelveTime <= Date.now()) {
                callback(new Error(this.shelfMessage))
              }
              if (parOffShelveTime <= Date.now()) {
                callback(new Error(this.offShelfMessage))
              }
            }
            callback()
          }, 200)
        },
        nullMessage: '请至少选择一项',
        minMessage: '下架时间要大于上架时间',
        shelfMessage: '上架时间要大于当前时间',
        offShelfMessage: '下架时间要大于当前时间'
      }
      this.rules.push(ruleItem)
    },
    methods: {
      handleDateChange () {
        // 只要选了一个时间 则去除必填限制
        if (this.editorForm.shelveTime || this.editorForm.offShelveTime) {
          this.editorForm.trainShelveTimeCheck = 'inputed'
        }
      },
      handleShelfChange (newVal) { // 上架类型变动
        if (newVal === SHELF_LEVEL.TIME) {
          this.rules[0].required = !0
          this.editorForm.shelveTime = ''
          this.editorForm.offShelveTime = ''
          this.editorForm.trainShelveTimeCheck = ''
        } else {
          // 默认赋值 防止表单验证不通过
          this.editorForm.shelveTime = filters.FormatDate(new Date(), SHELVE_TIME_FORMAT)
          this.editorForm.offShelveTime = filters.FormatDate(new Date(), SHELVE_TIME_FORMAT)
        }
        this._updateData()
      },
      _updateData () {
        this.$emit('update:shelfLevel', this.shelfWay).$emit('update:formData', this.editorForm)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .train-shelf-wrapper{
    // dssadsa
  }
</style>
